<template>
  <div class="notfound">
    <h1>404</h1>
    <p>页面走丢了~</p>
  </div>
</template>

<script>
  export default {
    name: "notfound"
  }
</script>

<style scoped>
  *{margin: 0; padding: 0;}
  .notfound{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-image: url("./../assets/404.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .notfound h1{
    color: rgba(0, 0, 0, 0.96);
    font-size: 100px;
    font-weight: bold;
    letter-spacing: 40px;
    padding-left: 40px;
    cursor: pointer;
  }
  .notfound p{
    color: rgba(0, 0, 0, 0.96);
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .notfound h1::selection,
  .notfound p::selection{
    background: none;
  }
  .notfound::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(90deg, #e74c3c, #e67e22, #f1c40f, #2ecc71, #1abc9c, #3498db, #9b59b6, #e74c3c);
    background-size: 600%;
    animation: change_color 40s linear infinite;
    opacity: 0.35;
  }
  @keyframes change_color {
    0%{
      background-position: 0%;
    }
    100%{
      background-position: 600%;
    }
  }
</style>